<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
		<title>购物车</title>
		<link rel="stylesheet" type="text/css" href="css/shoppingcart.css" />
		<script src="js/jquery-3.1.1.min.js"></script>

	</head>
	<body>
		<div class="body">
			<div class="shop"><i></i><span>我的购物车</span></div>
			<div class="product">
				<div class="product-box">
					<div class="product-ckb"><em class="product-em product-xz checked"></em></div>
					<div class="product-sx" id="product1">
						<a href="###">
							<img src="img/a3.png" class="product-img" />
							<span class="product-name">酷冷至尊(Cooler Master)T610P CPU风冷散热器</span>
						</a>
						<span class="product-price">¥&thinsp;<span class="price">299</span></span>
						<div class="product-amount">
							<div class="product_gw">
								<em class="product-jian">-</em>
								<input type="text" value="1" class="product-num" id="num1"/>
								<em class="product-add">+</em>
							</div>
						</div>
						<div class="product-del"><img src="img/deleteico.png" /></div>
					</div>
				</div>
				<div class="product-box">
					<div class="product-ckb"><em class="product-em"></em></div>
					<div class="product-sx" id="product2">
						<a href="###">
							<img src="img/a1.png" class="product-img" />
							<span class="product-name">游戏悍将 35英寸曲面电竞显示器21:9带鱼屏准4K游戏显示器</span>
						</a>
						<span class="product-price">¥&thinsp;<span class="price">2099</span></span>
						<div class="product-amount">
							<div class="product_gw">
								<em class="product-jian">-</em>
								<input type="text" value="1" class="product-num" id="num2"/>
								<em class="product-add">+</em>
							</div>
						</div>
						<div class="product-del"><img src="img/deleteico.png" /></div>
					</div>
				</div>

				<div class="product-box">
					<div class="product-ckb"><em class="product-em"></em></div>
					<div class="product-sx" id="product3">
						<a href="###">
							<img src="img/a2.png" class="product-img" />
							<span class="product-name">技嘉（GIGABYTE） 2080TURBO OC 8GC</span>
						</a>
						<span class="product-price">¥&thinsp;<span class="price">1099</span></span>
						<div class="product-amount">
							<div class="product_gw">
								<em class="product-jian">-</em>
								<input type="text" value="1" class="product-num" id="num3"/>
								<em class="product-add">+</em>
							</div>
						</div>
						<div class="product-del"><img src="img/deleteico.png" /></div>
					</div>
				</div>

				<div class="product-box">
					<div class="product-ckb"><em class="product-em"></em></div>
					<div class="product-sx" id="product4">
						<a href="###">
							<img src="img/a4.png" class="product-img" />
							<span class="product-name">AMD 锐龙 5 2600X 处理器 (R5) 6核12线程 AM4 </span>
						</a>
						<span class="product-price">¥&thinsp;<span class="price">1299</span></span>
						<div class="product-amount">
							<div class="product_gw">
								<em class="product-jian">-</em>
								<input type="text" value="1" class="product-num" id="num4"/>
								<em class="product-add">+</em>
							</div>
						</div>
						<div class="product-del"><img src="img/deleteico.png" /></div>
					</div>
				</div>
			</div>
			<div class="product-js">
				<div class="product-al">
					<div class="product-all">
						<em class="all "></em>
					</div>
					<div class="all-xz"><span class="product-all-qx">全选</span>
						<div class="all-sl" style="display: inline-block;">(<span class="product-all-sl">1</span>)</div>
					</div>
				</div>
				<a href="#" class="product-sett product-sett-a" style="background-color: red">结算</a>
				<div class="all-product" ><span class="all-product-a">¥&thinsp;<span class="all-price">299</span></span></div>

			</div>
		</div>
		<!--购物车空-->
		<div class="kon-cat">
			<div class="catkon">
				<div class="kon-box">
					<div class="kon-hz">
						<img src="img/cart-air.png" />
						<span class="kon-wz">购物车什么都没有</span>
						<a href="###" class="kon-lj">去逛逛</a>
					</div>
				</div>
			</div>
		</div>
	<script>
		$(function () {

			//价格控制
			function price() {
				let $product = $(".product-box").find("div[id]");
				let summer = 0;
				$product.each(function(i,dom) {
					let checked=$(dom).prev().children().attr("class");
					//判断是否被选中
					if(checked.indexOf("checked")>=0){
						let num = $(dom).parent().find("input").val(); //商品数量
						let price = num*$(dom).children(".product-price").children(".price").text(); //商品小计
						summer += price; //总价
					}
				});
				$(".all-price").text(summer);
			}

			//商品增加减少 ，flag 为true时增加 flag为false时减少
			function changN(dom, flag) {
				let value=$(dom).siblings("input").val();
				if(flag) {
					value++;
				} else {
					value--;
					if(value < 1) {
						value = 1;
						alert("宝贝数量不能为负值")
					}
				}
				$(dom).siblings("input").val(value);
				price();
			}

			price();

			//点击增加
			$(".product-add").click(function() {
				changN(this, true);
			});
			//点击减少
			$(".product-jian").click(function() {
				changN(this, false);
			});

			//点击删除
			$(".product-del").click(function() {
				if (confirm('确定要删除该行信息?')){
					$(this).parent().parent().remove(); //删除当前商品div
					price();
				}
				let product=$(".product-box").length;
				console.log(product);
				if (product==0){
					$(".kon-cat").css("display","inline-block");
				}
			});

			// 选中
			$(".product-em").click(function () {
				$(this).toggleClass("product-xz checked");
				price();
				let checked=$(".checked");
				let cknum=checked.length;
				if (cknum==0){
					$(".product-sett-a").css("background-color","gray");
				}else {
					$(".product-sett-a").css("background-color","red");
				}
				$(".product-all-sl").text(cknum);


			});
			//全选
			function handler1() {
				$(".all").addClass("product-all-on");
				$(".product-em").addClass("product-xz checked");
				price();
				$(".all").one("click", handler2);
				let checked=$(".checked");
				let cknum=checked.length;
				if (cknum==0){
					$(".product-sett-a").css("background-color","gray");
				}else {
					$(".product-sett-a").css("background-color","red");
				}
				$(".product-all-sl").text(cknum);
			}
			function handler2() {
				$(".all").removeClass("product-all-on");
				$(".product-em").removeClass("product-xz checked");
				$(".all").one("click", handler1);
				price();
				let checked=$(".checked");
				let cknum=checked.length;
				if (cknum==0){
					$(".product-sett-a").css("background-color","gray");
				}
				else {
					$(".product-sett-a").css("background-color","red");
				}
				$(".product-all-sl").text(cknum);
			}
			$(".all").one("click", handler1);

		});
	</script>
	</body>
</html>
